<script setup>
import {reactive, ref} from 'vue';
import {ChatDotRound, Lock, Phone, User, UserFilled} from "@element-plus/icons-vue";
import router from "@/router/index.js";
import {registerService} from "@/api/auth.js";
import {ElMessage} from "element-plus";

// 表单数据
const form = reactive({
  name: '',
  username: '',
  email: '',
  phone: '',
  password: '',
  agreement: false,
});

const rules = {
  name: [
    {required: true, message: '姓名不能为空', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        const nameRegex = /^[\u4e00-\u9fa5a-zA-Z\W_]{2,16}$/;
        if (!nameRegex.test(value)) {
          callback(new Error('请输入合法的姓名（2 ~ 16位，支持中英文和特殊符号）'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  username: [
    {required: true, message: '用户名不能为空', trigger: 'blur'},
    {min: 8, max: 16, message: '用户名长度应在 8 ~ 16 位之间', trigger: 'blur'}
  ],
  email: [
    {required: true, message: '邮箱不能为空', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '手机号不能为空', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的中国大陆手机号', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'},
    {min: 8, max: 16, message: '密码长度应在 8 ~ 16 位之间', trigger: 'blur'}
  ],
  agreement: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请阅读并同意用户协议'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ]
};

const formRef = ref();

const agreementVisible = ref(false);

// 注册
const handleRegister = async () => {
  try {
    const valid = await formRef.value.validate()
    if (valid) {
      const res = await registerService(form)

      if (res.data.code === '200') {
        ElMessage.success('注册成功')
        void router.push('/login')
      } else {
        ElMessage.error(res.data.message || '注册失败')
      }
    }
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}


</script>

<template>
  <div class="register-container">
    <div class="content">
      <div class="header">
        <h2 style="margin-top: 10px">欢迎注册</h2>
      </div>
      <div class="main">
        <el-form :model="form" :rules="rules" ref="formRef" style="width: 600px">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名">
              <template #prefix>
                <el-icon size="18">
                  <UserFilled
                  />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="form.username" class="el-form-item" placeholder="请输入用户名">
              <template #prefix>
                <el-icon size="18">
                  <User/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="form.email" class="el-form-item" placeholder="请输入邮箱">
              <template #prefix>
                <el-icon size="18">
                  <ChatDotRound/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="phone">
            <el-input v-model="form.phone" class="el-form-item" placeholder="请输入手机号">
              <template #prefix>
                <el-icon size="18">
                  <Phone/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password placeholder="请输入密码" type="password" class="el-form-item"
                      v-model="form.password">
              <template #prefix>
                <el-icon size="18">
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="agreement">
            <div style="width: 100%;display: flex; justify-content: space-between; align-items: center;">
              <el-checkbox v-model="form.agreement"></el-checkbox>
              <div style="margin-right: 40px"><span style="cursor: pointer"
                                                    @click="form.agreement = !form.agreement">我已阅读并同意</span>
                <span
                    style="color: #409EFF;cursor: pointer"
                    @click="agreementVisible = true">《用户协议》</span>
              </div>
              <div style="cursor: pointer; color: #409EFF" @click="router.push('/login')">已有帐号，返回登录</div>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button style="width: 100%;margin-bottom: 20px ;height: 40px;margin-top: 10px ;font-size: 18px"
                       type="primary"
                       @click="handleRegister">注 册
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

  <el-dialog align-center="align-center" v-model="agreementVisible" title="用户协议" width="60%" :show-close="false">
    <div class="dialog-content">
      <p>欢迎注册本平台，请您在注册前仔细阅读以下条款：</p>
      <p><strong>一、服务条款</strong></p>
      <p>1. 用户需提供真实、准确的注册信息。</p>
      <p>2. 用户不得利用本平台从事违法活动。</p>
      <p>3. 平台保留对服务条款的最终解释权和修改权。</p>

      <p><strong>二、隐私政策</strong></p>
      <p>1. 我们承诺保护用户的个人信息安全。</p>
      <p>2. 用户信息仅用于提供服务及优化体验。</p>

      <p><strong>三、免责条款</strong></p>
      <p>1. 因不可抗力导致服务中断，平台不承担责任。</p>
      <p>2. 使用本平台即视为接受以上所有条款。</p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="agreementVisible = false;form.agreement=true">我已阅读并同意</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style lang="scss" scoped>
:deep() .el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.dialog-content {
  padding: 20px;
  max-height: 450px;
  overflow-y: auto;
  line-height: 1.8;
  font-size: 14px;
  color: #333;

  p {
    margin-bottom: 12px;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #c0c4cc;
    border-radius: 3px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  padding: 10px 20px 20px;
}


.el-form-item {
  margin-top: 10px;
}

.register-container {
  height: 100vh;
  background-image: url('@/assets/login/background.png');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 650px;
    height: 560px;
    border-radius: 12px;
    background-color: #FFF;

    .header {
      margin-top: 30px;

      h2 {
        text-align: center;
      }
    }

    .main {
      margin: 20px auto;
      width: 380px;
      height: 300px;
      display: flex;
    }

    .footer {
      margin: 20px auto;
      height: 50px;
      width: 380px;
      display: flex;
    }

  }
}

:deep() .el-input__wrapper {
  height: 40px;
}
</style>